<template>
  <contents :heightInclude="['navBar']" class="detailedList_page">
    <view class="top"
      >可查询近<text style="color: #ff5e00">三</text>个月的明细数据</view
    >
    <u-tabs
      :bold="false"
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      active-color="#000000"
      inactive-color="#888888"
      :bar-style="{
        background: '#0049AC'
      }"
    ></u-tabs>
    <scroll-view scroll-y class="scroll">
      <view v-if="tableData.length === 0" class="null_data">
        <image class="img" src="@/static/images/null-wallet.png" />
        <view>暂无任何记录哦</view>
      </view>
      <view class="trans_item" v-for="(item, index) in tableData" :key="index">
        <view class="left">
          <view class="type">{{ item.transIdAlias }}</view>
          <view class="date">{{ item.transMerDateTime }}</view>
        </view>
        <view class="prc">
          {{ item.transIdAlias === '充值' ? '+' : '' }}
          {{ item.transIdAlias === '提现' ? '-' : '' }}
          {{ item.orgTransAmount }}
        </view>
      </view>
    </scroll-view>
  </contents>
</template>
<script>
import { doVisTransferQry } from '@/api/http/wallet'
import { getLast3Month } from '@/util'
export default {
  data() {
    return {
      current: 0,
      list: [
        {
          name: '全部'
        },
        {
          name: '收入'
        },
        {
          name: '支出'
        }
      ],
      tableData: []
    }
  },
  onLoad() {
    this.getData()
  },
  methods: {
    change(index) {
      this.current = index
      this.getData(index)
    },

    async getData(type = 0) {
      const typeInfo = {
        0: '',
        1: '充值',
        2: '提现'
      }
      const date = getLast3Month(Date.now())
      const res = await doVisTransferQry({
        beginDate: date.last,
        endDate: date.now,
        orgTransStauts: typeInfo[type]
      })
      if (res.code === 200 && res.data) {
        if (res.data.transInfoList.length !== 0) {
          this.tableData = res.data.transInfoList
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.detailedList_page {
  .top {
    background-color: #fff4e5;
    padding: 24rpx;
    color: #444444;
    font-size: 26rpx;
  }
  .null_data {
    /* #ifdef APP-PLUS || MP-WEIXIN */
    height: calc(100vh - 46px - 44px);
    /* #endif */

    /* #ifdef H5 */
    height: calc(100vh - 44px - 46px - 44px);
    /* #endif */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 200rpx;
  }
  .scroll {
    /* #ifdef APP-PLUS || MP-WEIXIN */
    height: calc(100vh - 46px - 44px);
    /* #endif */

    /* #ifdef H5 */
    height: calc(100vh - 44px - 46px - 44px);
    /* #endif */
  }

  .trans_item {
    border-top: 1px solid #eeeeee;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 10rpx 30rpx;
    align-items: center;
    .type {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      margin-bottom: 10rpx;
    }
    .date {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #555555;
    }
    .prc {
      font-size: 36rpx;
      font-family: PingFang SC;
      font-weight: bold;
    }
  }
}
</style>